<template>
  <div style="width: 400px;margin-top: 50px;margin-left: 40px">
    <el-form :label-position="labelPosition" label-width="80px" :model="form" :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="账户" prop="account">
        <el-input v-model="form.account" placeholder="账户名为姓名的全拼"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="idNumber">
        <el-input v-model="form.idNumber" placeholder="请输入身份证号" maxlength="18" @input="inputChange"></el-input>
      </el-form-item>
      <el-form-item label="年龄" required>
        <el-input v-model="form.age" placeholder="" disabled></el-input>
      </el-form-item>
      <el-form-item label="性别" required>
        <el-input v-model="form.sex" placeholder="" disabled></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">确定</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
import request from "@/utils/request";

export default {
  name: 'AddUserView',
  data() {
    return {
      labelPosition: 'left',
      form: {
        name: '',
        account: '',
        idNumber: '',
        age: '',
        phone: '',
        sex: '',
        status: '1'
      },
      rules: {
        name: [
          {required: true, message: '姓名不能为空', trigger: 'blur'},
        ],
        account: [
          {required: true, message: '账号不能为空', trigger: 'blur'},
        ],
        idNumber: [
          {required: true, message: '身份证号不能为空', trigger: 'blur'},
          {validator: this.validID, trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请填写手机号', trigger: 'blur'},
          {
            pattern: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,
            message: '手机号格式不对',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  methods:
      {
        save() {
          request.post('/user/add', this.form).then
          {
            res => {
              if (res.code === '200') {
                this.$notify.success("员工添加成功")
              } else {
                this.$notify.error(res.msg)
              }
            }
          }
        }
        ,
        reset() {
          this.form = {
            name: '',
            account: '',
            idNumber: '',
            age: '',
            phone: '',
            sex: ''
          }
        },
        inputChange() {
          const reg =
              /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
          if (reg.test(this.form.idNumber)) {
            var org_birthday = this.form.idNumber.substring(6, 14);
            var org_gender = this.form.idNumber.substring(16, 17);
            var sex = org_gender % 2 == 1 ? "男" : "女";
            var birthday =
                org_birthday.substring(0, 4) +
                "-" +
                org_birthday.substring(4, 6) +
                "-" +
                org_birthday.substring(6, 8);
            var birthdays = new Date(birthday.replace(/-/g, "/"));
            let d = new Date();
            let age =
                d.getFullYear() -
                birthdays.getFullYear() -
                (d.getMonth() < birthdays.getMonth() ||
                (d.getMonth() == birthdays.getMonth() &&
                    d.getDate() < birthdays.getDate())
                    ? 1
                    : 0);
            this.form.sex = sex;
            this.form.age = age;
          } else {
            this.form.sex = "未填写";
            return false;
          }
        }
      },
}
</script>